import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import { Circle1, Circle2, Circle3, Needle } from './picture';
import s from './SecurityRating.module.css';

const securityLevel = score => {
	const score_ = isNaN(score) ? score : 100 - score;
	if (score === 100) {
		return {
			score,
			Circle: Circle2,
			level: '安全',
			color: '#e9fced ',
			colorT: '#11AB4E ',
			rotate: -120,
		};
	} else if (score > 75) {
		return {
			score,
			Circle: Circle3,
			level: '低危',
			color: '#fffae4 ',
			colorT: '#ffe579 ',
			rotate: -90,
		};
	} else if (score > 50) {
		return {
			score,
			Circle: Circle3,
			level: '中危',

			color: '#feebe3 ',
			colorT: '#ff8f55 ',
			rotate: -40,
		};
	} else if (score > 25) {
		return {
			score,
			Circle: Circle3,
			level: '高危',
			color: '#ff3b46 ',
			colorT: '#ffe3e2 ',
			rotate: 40,
		};
	} else if (score > 0) {
		return {
			score,
			Circle: Circle3,
			level: '严重',
			color: '#fde2e1 ',
			colorT: '#ee4a4b ',

			rotate: 100,
		};
	} else {
		return {
			score,
			Circle: Circle1,
			level: '未知',
			color: '#f4f4f4',
			colorT: '##a6a6a6 ',
			rotate: -40,
		};
	}
};

export default function SecurityRating({ className, score }) {
	const { Circle, color, colorT, rotate, level } = securityLevel(score);

	return (
		<div className={cn(className, s.securityRating)}>
			<div className={s.descWapper}>
				<div>安全评分</div>
				<Circle className={s.Circle} />
				<div className={s.score}>{score}</div>
				<div className={s.text} style={{ background: color }}>
					<span style={{ color: colorT }}>{level}</span>
				</div>
				<div
					className={s.needle}
					style={{
						transform: `rotate(${rotate}deg)`,
					}}
				>
					<Needle></Needle>
				</div>
			</div>
		</div>
	);
}

SecurityRating.propTypes = {
	className: PropTypes.string,
	score: PropTypes.any,
};

SecurityRating.defaultProps = {
	className: s.securityRating,
};
